import * as React from 'react';
import Box from '@/commonComponents/box/index';
import Channel from '../channel';
import './index.module.scss';

const { memo } = React;

interface ChannelProps {
  name: string;
  desc: string;
  type: string;
}
export interface SeatProps {
  data?: number[];
  isLoading?: boolean;
  type: string;
  priceMsg: string;
  ticketsLeft: string;
  channels: ChannelProps[];
  expanded: boolean;
  onToggle: (id: number) => void;
  idx: number;
}

function Seat(props: SeatProps) {
  // const { data } = props;
  const { type, priceMsg, ticketsLeft, channels, expanded, onToggle, idx } =
    props;
  return (
    <Box data={[1]} isLoading={false} styleName="seat-box">
      <li>
        <div styleName="bar" onClick={() => onToggle(idx)}>
          <span styleName="seat">{type}</span>
          <span styleName="price">
            <i>￥</i>
            {priceMsg}
          </span>
          <span styleName="btn">{expanded ? '预订' : '收起'}</span>
          <span styleName="num">{ticketsLeft}</span>
        </div>
        <div
          styleName="channels"
          style={{ height: expanded ? channels.length * 55 + 'px' : 0 }}
        >
          {channels.map((channel) => {
            return (
              <Channel
                key={channel.name}
                name={channel.name}
                desc={channel.desc}
                type={type}
              />
            );
          })}
        </div>
      </li>
    </Box>
  );
}

export default memo(Seat);
